<template>
  <div class="data-box">
    <div class="title-box">
      <h2>{{ title }}</h2>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title: string;
}>();
</script>

<style scoped>
.data-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.title-box {
  text-align: center;
  padding: 2px; /* 减少内边距 */
  background-color: #45d5ff; /* 使用绿色背景 */
  border-radius: 8px 8px 0 0; /* 圆角 */
}

.title-box h2 {
  margin: 0;
  font-size: 16px; /* 减小字体大小 */
  color: #fff; /* 白色字体 */
  font-weight: bold;
}

.content {
  flex: 1;
  padding: 2px; /* 减少内边距 */
  box-sizing: border-box;

}
</style>